<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
</head>
<body>
    <!-- 先传递给父组件,然后再传递到子组件 -->
    <div id="box">
      <button @click="sendAjax">点击</button>
      <!-- item这个是临时变量,然后传递给子类 父类把数据传递给子类 -->
      <file-item v-for="item in dataList" :mydata="item" @mydetil="showDetil"></file-item>

      <!-- 详情组件  绑定的要填:后面的,不是双引号里面的,下面的[]里面 -->
      <file-detil :showdata="myData" v-show="isShow"></file-detil>
    </div>
  
    <script>
        Vue.component("fileItem",{
            props:["mydata"],
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                    {{mydata}}
                    <button @click="showDteils">详情</button>
                </div>
            `,
           methods:{
            showDteils(){
                // 可以得到一些信息
                console.log(this.mydata,"1")
                // 把数据传递过去   
                this.$emit("mydetil",this.mydata)
            }
           }
        }) 
        Vue.component("fileDetil",{
            props:["showdata"],
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                {{showdata}}zz
                </div>
            `,
           methods:{
           }
        }) 
        // 根组件
     let vm =    new Vue({
            el:"#box",
            data:{
                dataList:[],
                myData:[],
                isShow:false

            },
            methods:{
                sendAjax(){
                    fetch("./0-test.json").then(res=>res.json()).then(res=> this.dataList = res)
                },
                showDetil(data){
                    console.log("展示详情")
                    if(this.isShow){
                        this.isShow = !this.isShow
                    }
                    this.myData = data
                    this.isShow = !this.isShow
                    
                    // 再让详情展示和隐藏
                    // this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>